<template>
  <div class="Loginhtml">
    <div class="head">
      <div class="cont1200">
        <router-link to="/">
          <img
            src="https://img3.tuhu.org/Home/Image/FjEIp5II-GFb-iTS4wJ-SEqTDQNO_w173_h52.png@100Q.png"
            alt
          />
        </router-link>

        <span @click="gett">欢迎登录</span>
      </div>
    </div>

    <div class="body">
      <div class="logbox">
        <div class="title">
          <ul class="flex">
            <li @click="isvue = 'PLm'" :class="{active: isvue == 'PLm'}">手机登录</li>
            <li @click="isvue = 'MLm'" :class="{active: isvue == 'MLm'}">密码登录</li>
            <li @click="isvue = 'rem'" :class="{active: isvue == 'rem'}">免费注册</li>
          </ul>
        </div>
        <div class="isvue">
          <div :is="isvue"></div>
        </div>
      </div>
    </div>
    {{$route.query.id}}
  </div>
</template>
<script type="text/ecmascript-6">
import MLm from "./loginModule";
import PLm from "./phoneLoginModule";
import QCLm from "./qcModule";
import rem from "./regModule";

export default {
  data() {
    return {
      isvue: "MLm"
    };
  },
  methods: {
    gett() {
      console.log(this.$route.params.type);
    }
  },
  components: {
    MLm: MLm,
    PLm: PLm,
    QCLm: QCLm,
    rem: rem
  }
};
</script>
<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.Loginhtml {
  .active {
    color: $main-color12;

    // border-bootm: 3px red solid;
    border-bottom: 3px $main-color solid;
  }
  .head {
    // height: 100px;
    padding: 20px;
    background-color: white;
    span {
      position: relative;
      top: -15px;
    }
  }

  .body {
    width: 100%;
    height: 600px;
    background-image: url("https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/gallery/2018/08/15/15343201384097.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    // background-color:
    .logbox {
      position: absolute;

      width: 300px;
      height: 350px;
      top: 50px;
      background-color: rgb(255, 255, 255);
      right: 50px;
      padding: 40px;

      .title {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        ul {
          width: 100%;
          li {
            line-height: 30px;
            font-weight: 700;
            cursor: pointer;
          }
        }
      }
      .isvue{
        .el-input__inner{
          // margin: 10px;
        }
      }
    }
  }
}
</style>

